<template>
    <div>
        <el-dialog :destroy-on-close="true"
                   :title="isAddPage?'添加菜单':'修改菜单'"
                   :close-on-click-modal="false"
                   @close="closeDialog"
                   :visible="visible"
                   width="1000px">
            <el-form ref="formRef" :model="form" :rules="rules"  label-width="120px" >
                <el-row>
                    <el-col :span="12">
                        <div class="item_title" >菜单权限</div>
                        <el-row v-if="isAddPage">
                            <el-col :span="24">
                                <el-form-item label="一级菜单"  prop="isOnRoot">
                                    <el-checkbox v-if="form.pid===0" v-model="form.isOnRoot" disabled></el-checkbox>
                                    <el-checkbox v-if="form.pid!==0" v-model="form.isOnRoot"></el-checkbox>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row v-if="isAddPage">
                            <el-col :span="16" v-if="!form.isOnRoot" >
                                <el-form-item label="上级菜单"  prop="pName">
                                    <el-input v-model="form.pName" disabled :readonly="true"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="菜单名称"  prop="menuName">
                                    <el-input  v-model="form.menuName"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="菜单图标"  prop="icon">
                                    <i v-if="form.icon!=null&&form.icon!=='' " :class="form.icon"></i>
                                    <el-button style="margin: 0px 0px 0px 10px" type="primary" @click="openIconSelector">选择图标</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="系统编码"  prop="sysCode">
                                    <el-input @change="setMenuCode"  v-model="form.sysCode"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="所属应用"  prop="appID">
                                    <el-select v-model="form.appID" filterable  clearable class="w100"   >
                                        <el-option
                                                v-for="item in this.appList"
                                                :key="item.id"
                                                :label="item.appName"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="菜单地址"  prop="menuUrl">
                                    <el-input @change="setMenuCode"  v-model="form.menuUrl"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="菜单编码"  prop="menuNo">
                                    <el-input disabled :readonly="true" v-model="form.menuNo"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="是否启用"  prop="isEnable">
                                    <el-checkbox v-model="form.isEnable"></el-checkbox>
                                </el-form-item>
                            </el-col>
                        </el-row>


                    </el-col>
                    <el-col :span="12" style="padding: 0px 0px 0px 10px">
                        <div class="item_title" >操作权限</div>
                        <el-row  style="text-align: right">
                            <el-button type="primary" @click="addOperation()" plain >添加</el-button>
                        </el-row>

                        <el-table
                                border stripe highlight-current-row  header-cell-class-name="t_h_cell" class="data-table"
                                @current-change="dataChange"
                                :data="form.operations"
                                :height="280">

                            <el-table-column  :width="180" :show-overflow-tooltip="true" prop="butName" label="操作名称">
                                <template  slot-scope="scope">
                                    <el-input  v-model='scope.row.optName'></el-input>
                                </template>
                            </el-table-column>

                            <el-table-column :width="200" :show-overflow-tooltip="true" prop="butCode" label="操作编码">
                                <template  slot-scope="scope">
                                    <el-input  v-model='scope.row.optNo'></el-input>
                                </template>
                            </el-table-column>

                            <el-table-column  :show-overflow-tooltip="true" prop="butCode" label="操作">
                                <template  slot-scope="scope">
                                    <el-button type="danger" @click="removeButton(scope.$index, scope.row)" icon="el-icon-delete"  ></el-button>
                                </template>
                            </el-table-column>

                        </el-table>
                    </el-col>
                </el-row>

                <el-row style="text-align: right">
                    <el-form-item>
                        <el-button type="primary" @click="submitForm()">保存</el-button>
                        <el-button @click="closeDialog" >取消</el-button>
                    </el-form-item>
                </el-row>

            </el-form>
        </el-dialog>

        <icon_selector :visible.sync="iconVisible"
                   @setIcon="setIcon"  ref="editRef"  ></icon_selector>
    </div>
</template>

<script>
    import icon_selector from './icon_selector.vue'
    export default {
        components: {
            icon_selector
        },
        props: ['visible'],
        mounted() {
            this.$nextTick(function () {
                this.loadAppList();
            });
        },
        data() {
            return {
                isAddPage:true,
                currentRow:null,
                rowIndex:null,
                iconVisible:false,
                appList:[],
                form: {
                    isEnable:true,
                    isOnRoot:false,
                    menuNo:null,
                    operations:[],
                },
                rules: {
                    sysCode: [
                        { min: 2, max: 64, message: '长度在 2 到 64 个字符', trigger: 'blur' }
                    ],
                    appID: [
                        { required: true, message: '请输入数据', trigger: 'blur' },
                    ],
                    menuName: [
                        { required: true, message: '请输入数据', trigger: 'blur' },
                        { min: 2, max: 64, message: '长度在 2 到 64 个字符', trigger: 'blur' }
                    ],
                    menuUrl: [
                        { min: 2, max: 255, message: '长度在 2 到 255 个字符', trigger: 'blur' }
                    ],
                }
            }
        },methods: {
            dataChange(val,index) {
                this.currentRow = val;
                this.rowIndex=index;
                //console.log(val,index);
            },
            indexData(index){
                return index+1;
            },
            closeDialog() {
                this.$emit('update:visible',false);
                //Object.assign(this.$data, this.$options.data());
            },
            openIconSelector(){
                this.iconVisible=true;
            },
            setIcon(icon){
                this.form.icon=icon;
            },
            submitForm(){
                let _this=this;
                let url='/menu/save';
                if (!_this.isAddPage){
                    url='/menu/update';
                }
                this.$utils.submitFormData(_this,_this.$refs.formRef,url,_this.form,function (valid) {
                    if (_this.form.operations.length>0){
                        for (let i in _this.form.operations){
                            let opt=_this.form.operations[i];
                            if (opt.optName===''||opt.optCode===''){
                                valid=false;
                                _this.$message.error("操作名称/操作编码不能为空");
                                break;
                            }
                        }
                    }

                    return valid;
                },function () {
                    _this.closeDialog();
                    _this.$emit('loadData', true);
                });
            },
            addOperation(){
                this.form.operations.push({optName:'',optNo:''});
            },
            removeButton(index,row){
                let _this=this;
                _this.$confirm("确定删除", '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    _this.form.operations.splice(index,1);
                });
            },
            setMenuCode(){
                //console.log("start",this.form.menuCode);
                this.form.menuNo=this.getFirstChar(this.form.sysCode)+this.getFirstChar(this.form.menuUrl);
                //console.log("end",this.form.menuCode);
            },
            getFirstChar(str){
                if (str===undefined){
                    return "";
                }

                let result="";
                let arr=str.split('/');
                for (let i in arr){
                    let word=arr[i];
                    result+=word.substring(0,1);
                }
                return result;
            },
            initData(row){
                let pid=0;
                let pName=null;
                let isOnRoot=true;
                if (null!==row){
                    pid=row.id;
                    pName=row.menuName;
                    isOnRoot=false;
                }
                this.isAddPage=true;
                this.form={
                    pid:pid,
                    pName:pName,
                    isOnRoot:isOnRoot,
                    isEnable:true,
                    menuNo:null,
                    operations:[],
                }
            },
            loadAppList(){
                let _this=this;
                setTimeout(function(){
                    _this.$http.post('/app/getAppList').then(function(res){
                        if(res.data.success){
                            _this.appList=res.data.data;
                        }else{
                            _this.$message.error('操作失败！错误编码:'+res.data.code+'错误原因:'+res.data.msg);
                        }
                    },function(){
                        _this.$message.error('操作失败！');
                    });
                }, 100);
            },
            loadData(row){
                let _this=this;
                this.isAddPage=false;
                //console.log(row);
                setTimeout(function(){
                    _this.$http.post('/menu/getMenu/'+row.id).then(function(res){
                        if(res.data.success){
                            _this.form=res.data.data;
                        }else{
                            _this.$message.error('操作失败！错误编码:'+res.data.code+'错误原因:'+res.data.msg);
                        }
                    },function(){
                        _this.$message.error('操作失败！');
                    });
                }, 100);
            },

        }
    }

</script>
